<template>
  <div class="ab">
    <div class="btn">
      <el-button
          type="primary"
          style="margin-top: 5px; margin-left: 40px"
          @click="showadd"
      >
        添加+
      </el-button>
      <el-input
          class="search"
          placeholder="用户名"
          prefix-icon="el-icon-search"
          v-model="keywords"
      />
    </div>
    <el-table :data="search(keywords)" style="width: 100%" max-height="350">
      <el-table-column fixed prop="username" label="用户名" width="120" />
      <el-table-column prop="tschool" label="目标院校" width="260" />
      <el-table-column prop="email" label="邮箱" width="260" />
      <el-table-column prop="qq" label="qq" width="200" />
      <el-table-column prop="sex" label="性别" width="150" />
      <el-table-column prop="telphone" label="电话号码" width="300" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
              @click="deleteRow(scope.$index, scope.row)"
              type="text"
              size="small"
          >
            <i class="el-icon-delete"></i>
          </el-button>
          <el-button
              type="text"
              size="small"
              @click="changuser(scope.$index, scope.row)"
          >
            <i class="el-icon-edit"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration">分页选择</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="usertotal"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {
  ElButton,
  ElInput,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElMessage,
  ElMessageBox,
} from 'element-plus';
import { useStore } from 'vuex';

const keywords = ref('');
const componentName = 'adduser';
const component2 = 'editeuser';
const userlist = ref([]);
const currentPage = ref(1);
const pagesize = ref(10);
const usertotal = ref(0);
const url1 = ref('/ky/user/list?pageNum=');

const store = useStore();

const deleteRow = async (index, data) => {
  await ElMessageBox.confirm(
      '此操作将永久删除该用户, 是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          const result = await axios.get(`/ky/user/doDel?id=${data.id}`);
          if (result.data.message) {
            ElMessage.success(result.data.message);
            await querydata(currentPage.value);
          }
        } catch (error) {
          console.error('删除用户出错:', error);
        }
      })
      .catch(() => {
        ElMessage.info('已取消删除');
      });
};

const handleSizeChange = (val) => {
  pagesize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  querydata(val);
};

const search = (keywords) => {
  return userlist.value.filter((item) =>
      item.username.includes(keywords)
  );
};

const querydata = async (currentPage) => {
  try {
    const result = await axios.get(`${url1.value}${currentPage}`);
    userlist.value = result.data.data.list;
    usertotal.value = result.data.data.total;
  } catch (error) {
    console.error('请求数据出错:', error);
  }
};

const showadd = () => {
  // 这里假设父组件会监听 'addone' 事件
  // 你可能需要根据实际情况调整
  const event = new CustomEvent('addone', { detail: componentName });
  document.dispatchEvent(event);
};

const changuser = (index, data) => {
  // 这里假设父组件会监听 'addone' 事件
  // 你可能需要根据实际情况调整
  const event = new CustomEvent('addone', { detail: component2 });
  document.dispatchEvent(event);
  store.commit('userid', data.id);
};

onMounted(() => {
  querydata(currentPage.value);
});
</script>

<style scoped>
.btn {
  width: 100%;
  background-color: #fff;
}
.search {
  width: 200px;
  margin-left: 400px;
}
</style>